<script lang="ts" setup>
import { useBuyStore } from "@/store/buy"

const { aliPay, wechatPay } = useBuyStore()
const store = useBuyStore()
</script>

<template>
  <t-dialog
    v-model:visible="store.payTypeDialogVisible"
    :footer="false"
    header="请选择支付方式"
    width="400"
  >
    <t-space class="container" direction="vertical">
      <t-card class="card" hover-shadow @click="aliPay.doPay()" v-if="aliPay.cardVisible">
        <img alt="" src="../../assets/images/aliPay.png" />
      </t-card>
      <t-card class="card" hover-shadow @click="wechatPay.doPay()" v-if="wechatPay.cardVisible">
        <img alt="" src="../../assets/images/wechatPay.png" />
      </t-card>
      <t-card class="card" hover-shadow v-if="!wechatPay.cardVisible && !aliPay.cardVisible">
        管理员暂未开通在线支付
      </t-card>
    </t-space>
  </t-dialog>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 30px 0;

  .card {
    height: 100px;
    margin: 0 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 40px;
    }

  }
}
</style>
